<template>
  <div class="welf">
    <div class="tou">
      <div class="svg1" @click="$router.go(-1)">
        <svg
          t="1666783354989"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="2528"
          width="200"
          height="200"
        >
          <path
            d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
            p-id="2529"
          ></path>
        </svg>
      </div>
      <div class="inp">
        <svg
          t="1666783786135"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5381"
          width="200"
          height="200"
        >
          <path
            d="M703.722 643.895c36.472-58.77 57.825-129.217 57.825-205.042 0-205.042-155.362-371.317-347.017-371.317-191.655 0-347.017 166.275-347.017 371.317 0 204.998 155.363 371.295 347.017 371.295 101.925 0 193.32-47.34 256.792-122.22l-3.442 4.838 247.657 263.7 40.905-43.808-252.72-268.762zM414.552 747.688c-159.705 0-289.17-138.24-289.17-308.835 0-170.617 129.465-308.858 289.17-308.858 159.683 0 289.192 138.24 289.192 308.857-0.023 170.595-129.51 308.835-289.192 308.835z"
            p-id="5382"
          ></path>
        </svg>

        搜索补贴商品
      </div>
      <div class="svg2">
        <svg
          t="1666783626291"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3450"
          width="200"
          height="200"
        >
          <path
            d="M948.030409 156.104323a150.613416 150.613416 0 0 0-138.919951-92.117192l-40.098072 0.028899a31.926735 31.926735 0 1 0 0.0289 63.849858h40.123359a86.178343 86.178343 0 0 1 61.368112 25.467695C886.91878 169.784629 895.884854 191.614598 895.884854 214.820906v105.270082L128.003161 320.062089l-0.119211-0.032512V214.820906a86.95863 86.95863 0 0 1 86.868319-86.879157L255.760676 128.241582h0.231196a31.970084 31.970084 0 0 0 0.220359-63.940169l-41.142067-0.285383h-0.220359A150.85545 150.85545 0 0 0 63.940169 214.820906v594.300389A150.638703 150.638703 0 0 0 214.85703 959.825022h594.28594A150.385832 150.385832 0 0 0 959.825022 809.121295V214.820906a149.825904 149.825904 0 0 0-11.794613-58.716583z m-77.522939 714.39231a86.102482 86.102482 0 0 1-61.3645 25.388221H214.85703a86.369802 86.369802 0 0 1-61.483711-25.391834c-16.41131-16.407698-25.492981-38.16903-25.492981-61.375337V384.002258h0.115598l767.888918 0.028899v425.090138a86.106094 86.106094 0 0 1-25.377384 61.371725z"
            fill=""
            p-id="3451"
          ></path>
          <path
            d="M415.972342 159.969633a31.970084 31.970084 0 0 0 31.970085-31.970085V64.00158a31.970084 31.970084 0 0 0-63.940169 0v63.997968a31.970084 31.970084 0 0 0 31.970084 31.970085zM608.154093 159.969633a31.970084 31.970084 0 0 0 31.970085-31.970085V64.00158a31.970084 31.970084 0 0 0-63.940169 0v63.997968a31.970084 31.970084 0 0 0 31.970084 31.970085zM640.124178 447.942427h-256.12192a31.970084 31.970084 0 0 0 0 63.940169h195.837539c-9.865571 15.815258-20.952146 34.697476-32.071233 55.830243-19.445759 36.966088-34.979246 73.260261-46.170582 107.867427-14.312483 44.270439-21.569873 86.080807-21.569873 124.267899a31.970084 31.970084 0 1 0 63.940169 0c0-31.334295 6.141146-66.324379 18.278941-104.005729 9.977556-31.001951 23.972145-63.759547 41.586397-97.366067 30.413123-58.019382 61.368112-98.727956 61.664333-99.114487A31.970084 31.970084 0 0 0 640.124178 447.942427z"
            fill=""
            p-id="3452"
          ></path>
        </svg>
      </div>
      <div class="svg3">
        <svg
          t="1666783655302"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4362"
          width="200"
          height="200"
        >
          <path
            d="M288 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
            p-id="4363"
          ></path>
          <path
            d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
            p-id="4364"
          ></path>
          <path
            d="M736 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
            p-id="4365"
          ></path>
        </svg>
      </div>
    </div>
    
    <div class="fenlei">
      <van-tabs class="toplist">
        <van-tab
          v-for="item in welflistsL"
          :title="item"
          :key="item"
          class="index"
        > 
          <div v-if="item == '精选'">
                <router-link tag="div" :to="'/show?id='+1" class="goods" v-for="(item,index) in bybtlists1" :key="index">
                    <div class="imgs">
                      <img :src="item.bybttp" alt="" />
                    </div>
                    <div class="right">
                      <div class="brand">
                        <div class="pp">
                          <img src="../assets/sptimgs/品牌.png" alt="" />
                        </div>
                        <div class="bybt">
                          <img src="../assets/sptimgs/百亿补贴.png" alt="" />
                        </div>
                      </div>
                      <div class="name">
                        <span>{{item.goldname}}</span>{{item.goodname}}
                      </div>
                      <div class="price">
                        <div class="le">
                          <div class="allnet">全网低价￥{{item.netprice}}元</div>
                          <div class="btmoney">补贴价格￥{{item.btprice}}元</div>
                        </div>
                        <div class="ri">已补{{item.okprice}}元</div>
                      </div>
                    </div>
                </router-link>
          </div>
          <div v-if="item == '5折'">
                <router-link tag="div" :to="'/show?id='+1" class="goods" v-for="(item,index) in bybtlists2" :key="index">
                    <div class="imgs">
                      <img :src="item.bybttp" alt="" />
                    </div>
                    <div class="right">
                      <div class="brand">
                        <div class="pp">
                          <img src="../assets/sptimgs/品牌.png" alt="" />
                        </div>
                        <div class="bybt">
                          <img src="../assets/sptimgs/百亿补贴.png" alt="" />
                        </div>
                      </div>
                      <div class="name">
                        <span>{{item.goldname}}</span>{{item.goodname}}
                      </div>
                      <div class="price">
                        <div class="le">
                          <div class="allnet">全网低价￥{{item.netprice}}元</div>
                          <div class="btmoney">补贴价格￥{{item.btprice}}元</div>
                        </div>
                        <div class="ri">已补{{item.okprice}}元</div>
                      </div>
                    </div>
                </router-link>
          </div>
          <div v-if="item == '内衣'">
                <router-link tag="div" :to="'/show?id='+1" class="goods" v-for="(item,index) in bybtlists3" :key="index">
                    <div class="imgs">
                      <img :src="item.bybttp" alt="" />
                    </div>
                    <div class="right">
                      <div class="brand">
                        <div class="pp">
                          <img src="../assets/sptimgs/品牌.png" alt="" />
                        </div>
                        <div class="bybt">
                          <img src="../assets/sptimgs/百亿补贴.png" alt="" />
                        </div>
                      </div>
                      <div class="name">
                        <span>{{item.goldname}}</span>{{item.goodname}}
                      </div>
                      <div class="price">
                        <div class="le">
                          <div class="allnet">全网低价￥{{item.netprice}}元</div>
                          <div class="btmoney">补贴价格￥{{item.btprice}}元</div>
                        </div>
                        <div class="ri">已补{{item.okprice}}元</div>
                      </div>
                    </div>
                </router-link>
          </div>
          <div v-if="item == '食品'">
                <router-link tag="div" :to="'/show?id='+1" class="goods" v-for="(item,index) in bybtlists4" :key="index">
                    <div class="imgs">
                      <img :src="item.bybttp" alt="" />
                    </div>
                    <div class="right">
                      <div class="brand">
                        <div class="pp">
                          <img src="../assets/sptimgs/品牌.png" alt="" />
                        </div>
                        <div class="bybt">
                          <img src="../assets/sptimgs/百亿补贴.png" alt="" />
                        </div>
                      </div>
                      <div class="name">
                        <span>{{item.goldname}}</span>{{item.goodname}}
                      </div>
                      <div class="price">
                        <div class="le">
                          <div class="allnet">全网低价￥{{item.netprice}}元</div>
                          <div class="btmoney">补贴价格￥{{item.btprice}}元</div>
                        </div>
                        <div class="ri">已补{{item.okprice}}元</div>
                      </div>
                    </div>
                </router-link>
          </div>
          <div v-if="item == '男装'">
                <router-link tag="div" :to="'/show?id='+1" class="goods" v-for="(item,index) in bybtlists5" :key="index">
                    <div class="imgs">
                      <img :src="item.bybttp" alt="" />
                    </div>
                    <div class="right">
                      <div class="brand">
                        <div class="pp">
                          <img src="../assets/sptimgs/品牌.png" alt="" />
                        </div>
                        <div class="bybt">
                          <img src="../assets/sptimgs/百亿补贴.png" alt="" />
                        </div>
                      </div>
                      <div class="name">
                        <span>{{item.goldname}}</span>{{item.goodname}}
                      </div>
                      <div class="price">
                        <div class="le">
                          <div class="allnet">全网低价￥{{item.netprice}}元</div>
                          <div class="btmoney">补贴价格￥{{item.btprice}}元</div>
                        </div>
                        <div class="ri">已补{{item.okprice}}元</div>
                      </div>
                    </div>
                </router-link>
          </div>
          <div v-if="item == '数码'">
                
          </div>
          <div v-if="item == '运动'">
                
          </div>
          <div v-if="item == '汽车'">
                
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getapidata } from "../api/newsele";
export default {
    data(){
        return{
          bybtlists1:"",
          bybtlists2:"",
          bybtlists3:"",
          bybtlists4:"",
          bybtlists5:"",
          welflistsL:['精选','5折','内衣','食品','男装','数码','运动','汽车'],
        }
    },
    created(){
        getapidata().then(data=>{
            this.bybtlists1 = data.bybt1;
            this.bybtlists2 = data.bybt2;
            this.bybtlists3 = data.bybt3;
            this.bybtlists4 = data.bybt4;
            this.bybtlists5 = data.bybt5;
        })
    }
};
</script>

<style lang="scss">
.welf .bcc{
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  img{
    width: 100%;
  }
}
.welf .tou {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  .svg1 {
    width: 20px;
    height: 20px;
    svg {
      width: 20px;
      height: 20px;
    }
  }
  .inp {
    flex: 1;
    height: 30px;
    margin-right: 10px;
    margin-left: 10px;
    border: 1px solid red;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bdbdbd;
    svg {
      width: 20px;
      height: 20px;
    }
  }
  .svg2 {
    width: 25px;
    height: 25px;
    margin: 0 5px;
    svg {
      width: 25px;
      height: 25px;
    }
  }
  .svg3 {
    width: 30px;
    height: 30px;
    svg {
      width: 30px;
      height: 30px;
    }
  }
}
.welf .fenlei {
  .goods {
    width: 100%;
    height: 130px;
    padding: 12px;
    display: flex;
    .imgs {
      width: 120px;
      height: 120px;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      height: 130px;
      .brand {
        width: 100%;
        height: 25px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        .pp {
          width: 36px;
          margin-right: 5px;
          img {
            width: 100%;
          }
        }
        .bybt {
          width: 64px;
          img {
            width: 100%;
          }
        }
      }
      .name {
        width: 84%;
        padding: 0 20px;
        span{
          color: #f5cc59;
        }
      }
      .price {
        width: 76%;
        margin-top: 10px;
        margin-left: 20px;
        background-color: pink;
        height: 44px;
        position: relative;
        display: flex;
        .le {
          width: 60%;
          height: 100%;
          display: flex;
          flex-direction: column;
          padding: 5px;
          .allnet {
            width: 100%;
            font-size: 12px;
            color: #e09baa;
          }
          .btmoney {
            width: 100%;
            font-size: 14px;
            color: #dc5863;
          }
        }
        .ri {
          position: absolute;
          top: -6px;
          right: -20px;
          width: 70px;
          height: 60px;
          background-color: pink;
          text-align: center;
          line-height: 60px;
          border-radius: 50%;
          font-size: 10px;
        }
      }
    }
  }
}
</style>